<!--
@功能：描述信息>
@作者：Maoxiangdong
@邮箱：862755519@qq.com
@日期：2024年11月07日 14:48:13
-->
<template>
  <div class="login-container">
    <el-row>
      <el-col :xs="0" :sm="0" :md="16" :lg="16" :xl="16">
        <div class="login-center-left">
          <div class="login-center-left-img">
            <img src="~@/assets/images/login.png" />
          </div>
          <div class="login-center-left-title">开箱即用的后台管理系统</div>
          <div class="login-center-left-text">工程化、组件化、高性能、响应式的前端模板</div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <div class="login-center-right">
          <div class="login-center-form">
            <div class="login-center-right-title">欢迎登录</div>
            <div class="login-center-right-text">输入账号密码登录后台管理系统</div>
            <el-form style="margin-top: 30px;">
              <el-form-item prop="name">
                <el-input size="large" placeholder="请输入登录密码">
                  <template #prefix>
                    <i class="iconfont icon-shouji1-xianxing"></i>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="name">
                <el-input size="large" type="password" placeholder="请输入登录账号" show-password>
                  <template #prefix>
                    <i class="iconfont icon-anquan1-xianxing"></i>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="name">
                <div class="login-center-flex">
                  <el-checkbox label="记住密码" />
                  <span>没有账号？</span>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="large" style="width: 100%;">立即登录</el-button>
              </el-form-item>
              <el-form-item>
                <el-divider><span>其他登录方式</span></el-divider>
                <div class="login-type">
                  <div class="type-item">
                    <SvgIcon type="qq" :size="35" />
                    <div>QQ</div>
                  </div>
                  <div class="type-item">
                    <SvgIcon type="wechat" :size="35" />
                    <div>微信</div>
                  </div>
                  <div class="type-item">
                    <SvgIcon type="weibo" :size="35" />
                    <div>微博</div>
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
</script>
<style lang='less' scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;

  .login-center-left {
    height: 100vh;
    width: 100%;
    background-image: linear-gradient(154deg, rgba(7, 7, 9, 0.082) 30%, rgba(0, 107, 230, 0.3) 48%, rgba(7, 7, 9, 0.082) 64%);

    &-img {
      text-align: center;

      img {
        width: 400px;
        height: 360px;
        margin-top: 20vh;
      }
    }

    &-title {
      text-align: center;
      font-size: 24px;
      color: #17233d;
      margin-top: 10px;
    }

    &-text {
      text-align: center;
      font-size: 16px;
      color: #515a6e;
      margin-top: 6px;
    }
  }

  .login-center-right {
    height: 100vh;
    width: 100%;
    background-color: #ffffff;

    .login-center-form {
      width: 80%;
      margin: auto;
      padding-top: 18vh;
    }

    &-title {
      font-size: 24px;
      color: #17233d;
    }

    &-text {
      font-size: 16px;
      color: #515a6e;
      margin-top: 6px;
    }

    .login-center-flex {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
        color: #515a6e;
        cursor: pointer;
      }
    }

    .login-type {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-top: 20px;
    }

    .type-item {
      width: 33%;
      text-align: center;
      color: #515a6e;
      font-size: 14px;
    }
  }
}

// 是手机设备
@media screen and (max-width: 680px) {
  .login-center-form {
    width: 88% !important;
  }
}
</style>